<template>
	<uv-popup ref="popupRef" mode="bottom" round="28rpx">
		<view class="upd-sort">
			<view class="title">退还押金</view>
			<view class="form">
				<view class="form-item">
					<view class="label">
						<text>扣除金额</text>
					</view>
					<view class="zdy-input">
						<input v-model="queryform.deductDeposit" :cursor-spacing="cursorSpacing" type="number"
							placeholder="请输入扣除金额">
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						<text>扣除项</text>
					</view>
					<view style="margin-top: 20rpx;">
						<uv-textarea v-model="queryform.deductReason" :cursor-spacing="cursorSpacingTextArea"
							border="none" placeholder="请输入扣除项"></uv-textarea>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						<text>扣除凭证</text>
						<text class="tips">（最多6张）</text>
					</view>
					<view class="uplaods" @click="handChooseImg('deductVoucher')">
						<view class="upload" v-for="(item, index) in queryform.deductVoucher" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="del" @click.stop="handDel(index, 'deductVoucher')">
								<uv-icon name="trash" color="orangered"></uv-icon>
							</view>
						</view>
						<view class="upload" v-if="queryform.deductVoucher.length < 6">
							<image src="/static/icon/coverupload.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="btns">
					<button class="cu-btn" @click="handClose">取消</button>
					<button class="cu-btn cu-btn-active" @click="handConfirm">确定</button>
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineEmits
	} from 'vue'
	import {
		doTui
	} from '@/apis/shopOrder.js'
	import uploadFile from '@/utils/ossutil/uploadFile.js'
	const emit = defineEmits(['change'])
	const rpxToPx = (rpx) => {
		const screenWidth = uni.getSystemInfoSync().screenWidth
		return (screenWidth * Number.parseInt(rpx)) / 750
	}
	const cursorSpacing = rpxToPx(30)
	const cursorSpacingTextArea = rpxToPx(120)

	const queryform = ref({
		orderId: '',
		deductDeposit: '',
		deductReason: '',
		deductVoucher: []
	})
	const handConfirm = async () => {
		const params = uni.$uv.deepClone(queryform.value)
		params.deductVoucher = params.deductVoucher.toString()
		if (params.deductDeposit && !params.deductReason) {
			uni.$uv.toast('请输入扣除项')
			return
		}
		await doTui(params)
		emit('success')
		handClose()
	}

	const handChooseImg = (name) => {
		uni.chooseImage({
			count: name === 'coverPlan' ? 1 : 6 - queryform.value[name].length,
			success: (res) => {
				res.tempFilePaths.forEach(el => {
					uploadFile(el, 'images/', el, (src => {
						queryform.value[name].push(src)
					}), (err => {

					}), (res => {

					}))
				})
			}
		})
	}

	const handDel = (index, name) => {
		queryform.value[name].splice(index, 1)
	}

	const popupRef = ref(null)
	const handOpen = (row) => {
		queryform.value = {
			orderId: row.id,
			deductDeposit: '',
			deductReason: '',
			deductVoucher: []
		}
		popupRef.value.open()
	}
	const handClose = () => {
		popupRef.value.close()
	}
	defineExpose({
		handOpen
	})
</script>

<style lang="scss" scoped>
	.upd-sort {
		padding: 30rpx 24rpx;
		padding-bottom: 58rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 58rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 58rpx);

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.form {
			background-color: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			border-radius: 16rpx;

			&:not(:first-child) {
				margin-top: 24rpx;
			}

			&-item {
				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.label {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;

					.tips {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.zdy-input {
					height: 94rpx;
					margin-top: 24rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 20rpx;
				}

				.uplaods {
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;

					.upload {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;

						image {
							width: 152rpx;
							height: 152rpx;
						}

						.del {
							position: absolute;
							right: 0;
							top: 0;
							background-color: rgba(0, 0, 0, 0.3);
							color: orangered;
							padding: 5rpx 10rpx;
							border-radius: 0 0 0 20rpx;
						}
					}
				}

				.textarea {
					margin-top: 32rpx;
				}

				.enum {
					.cell {
						margin-top: 48rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						.more {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;

							.to-add {
								color: #F57B01;
							}
						}
					}
				}
			}
		}

		.btns {
			margin-top: 102rpx;
			display: flex;
			align-items: center;

			.cu-btn {
				width: 312rpx;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				border: 1rpx solid #F5F5F5;

				&:last-child {
					margin-left: 62rpx;
				}

				&-active {
					background: #FFC434;
				}
			}
		}
	}
</style>